// @ts-nocheck
/* eslint-disable no-script-url */
/* eslint-disable jsx-a11y/anchor-is-valid */
import React, { Component } from 'react'
import {  Modal, Button } from 'antd';
import {ExclamationCircleOutlined} from '@ant-design/icons'
import dayjs from 'dayjs'
import memoryUtils from '../../utils/memoryUtils'
import storageUtils from '../../utils/storageUtils'
import withRouter from '../../utils/withRouter'
import menuList from '../../config/menuList.js'
import './index.less'

class Header extends Component {

  state= {
    currentTime: dayjs(Date.now()).format('YYYY-MM-DD HH:mm:ss') 
  }

  // 动态当前时间
  getTime = () => {
    this.intervalId = setInterval (() => {
      const currentTime = dayjs(Date.now()).format('YYYY-MM-DD HH:mm:ss')
      this.setState ({currentTime})
    },1000)
  }

  // 标题
  getTitile = () => {
    const path = this.props.location.pathname
    let title
    menuList.forEach (item => {
      if (item.key === path) {
        title = item.label
      } else if (item.children) {
        const cItem = item.children.find (cItem => path.indexOf (cItem.key) === 0)
        if (cItem) title = cItem.label
      }
    })
    return title
  }

  // 退出登录
  logout = () => {
    Modal.confirm({
      title: '确认退出吗',
      icon: <ExclamationCircleOutlined />,
      okText: '确认',
      cancelText: '取消',
      onOk: () => {
        // 清除用户信息 跳转登录
        storageUtils.removeUser ()
        this.props.navigate ('/login')
      }
    });
  }


  // 动态时间  第一次render后执行一次  异步操作Ajax 启动定时器
  componentDidMount () {
    this.getTime ()
  }

  componentWillUnmount () {
    clearInterval (this.intervalId)
  }

  render() {

    const {currentTime} = this.state
    const username = memoryUtils.user.username

    // 得到当前显示标题
    const title = this.getTitile ()

    return (
      <div className='header'>
        <div className='header-top'>
          <span>欢迎, {username}</span>
          <Button className='link-button' type="link" onClick={this.logout}>退出</Button>
        </div>
        <div className='header-bottom'>
          <div className='header-bottom-left'>{title}</div>
          <div className='header-bottom-right'>
            <span>{currentTime}</span>
            <img src="" alt="" />
            <span>晴</span>
          </div>
        </div>
      </div>
    )
  }
}
export default withRouter (Header)
